<template>
  <div>
    <template v-if="file.length>0">
          <div  v-for="item,index in file" :key="index" style="color: #468AFE;">
            <span @click="downLoad(item)" >{{ item.attachmentUrl  }}</span>
            <el-popconfirm
              confirm
              title="确定删除这条数据吗？"
              placement="bottom"
              @confirm="removeFile(item)"
              transfer >
                <i class="el-icon-circle-close"  slot="reference" style="right: 0;position: relative;"></i>
            </el-popconfirm>
          </div>
    </template> 
    <el-upload
        ref="upload"
        :on-error="error"
        action="#"
        :headers="headers"
        :on-success="success"
        :file-list="file"
        list-type="picture-card"
        :auto-upload="true"
        :show-file-list="false"
        :http-request="commitPic"
        :before-upload="beforeAvatarUpload"
        :disabled="seeFlag">
      <!-- <img v-if="file.fileUrl" :src="file.fileUrl" class="avatar" style="width: 148px;height: 148px"> -->
      <i class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
      <img width="100%" :src="dialogImageUrl" alt=""  v-if="file.fileUrl">
    </el-dialog>
  </div>


</template>

<script>

export default {
  data() {
    return {
      headers: {'Authorization':localStorage.getItem('token')},
      file:[],
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false
    };
  },
  props:{
    files:'',
    seeFlag:{
      default:false
    }
  },
  watch:{
    files:{
      immediate:true,
      handler(){
        try{
          this.file=JSON.parse(JSON.stringify(this.files))
        }catch (e) {

        }

      }
    },
  },
  methods: {
    downLoad(item){
      console.log(item)
      window.open(item.fileUrl,'_blank');
    },
    removeFile(res){
      this.file.splice(this.file.findIndex(item => item.id === res.id), 1);
      this.$emit('set',this.file);
      //this.$emit('removeFile',res);
    },
    commitPic(file){
      console.log(888)
      console.log(file)
      const formData = new FormData();
      formData.append("multipartFile", file.file);
      this.$api.uploadFile(formData).then(res=>{
        if(res.data){
          this.$message.success("上传成功")
          console.log([res.data])
          this.file.push(res.data)
          this.$emit('set',this.file)
        }else{
          this.$message.error("上传失败")
        }
      }).catch(err=>{
        //this.$message.error(err.message)
      })
    },
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg';
      // //const isLt2M = file.size / 1024 / 1024 < 2;

      // if (!isJPG) {
      //   this.$message.error('上传图片只能是图片格式!');
      // }
      // return isJPG
     /* if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      }*/
      //return isJPG //&& isLt2M;
    },
    error(e){
      console.log(e)
    },
    success(res){
      console.log(res)
      this.file=[res.data]
      this.$emit('getFile',res)
    },
    handleRemove(file) {
      console.log(file);
      //this.$refs.upload.clearFiles();
      //this.file=[]
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;

      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    }
  }
}
</script>

<style lang="less" scoped>
.ivu-upload{
  width: 320px;
}
</style>

